<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1.Map类型特点与创建方法</title>
</head>

<body>
  <script>
    //对象只是用字符串作为键名
    //map可以用对象、函数、字符串、数值作为键名
    let obj = {
      1: 'hdcms.com',
      '1': 'houdunren.com'
    };
    // 对象中键名一样，都会转成字符串，只能存在一个,另一个会被覆盖
    console.log(obj);//{1: 'houdunren.com'}
    // 想用对象做键，还是需要用[] 转成字符串，调用时也不是直接用obj对象
    let hd = {
      [obj]: '后盾人'
    }
    console.log(hd[obj.toString()]);//后盾人
    console.log(hd["[object Object]"]);//后盾人

    // map没有对象这样的限制，map可以用对象、函数、字符串、数值作为键名
    // 键保存的是内存地址，值相同但内存地址不同的视为两个键。
    // 使用set 给map添加数据
    let map = new Map();
    map.set("name", "后盾人");
    map.set(function () { }, "hdcms");
    map.set({}, "houdunren");
    map.set(1, "sina.com.cn");
    console.log(map);//Map(4) {'name' => '后盾人', ƒ => 'hdcms', {…} => 'houdunren', 1 => 'sina.com.cn'}
    map.clear();

    // 使用构造函数给map添加数据
    map = new Map([['hdcms', '开源系统'], ['houdunren', '开源教程']]);
    console.log(map);//Map(2) {'hdcms' => '开源系统', 'houdunren' => '开源教程'}
    //链式操作
    map.set("name","sina").set("site","后盾人");//Map(4) {'hdcms' => '开源系统', 'houdunren' => '开源教程', 'name' => 'sina', 'site' => '后盾人'}
    console.log(map); 

  </script>
</body>

</html>